import { Tooltip, useMediaQuery, Select, SpotlightTarget } from '@neo4j-ndl/react';
import { OptionType, ReusableDropdownProps } from '../types';
import { memo, useMemo } from 'react';
import { capitalize, capitalizeWithUnderscore } from '../utils/Utils';
import { prodllms } from '../utils/Constants';

const DropdownComponent: React.FC<ReusableDropdownProps> = ({
  options,
  placeholder,
  defaultValue,
  onSelect,
  children,
  view,
  isDisabled,
  value,
}) => {
  const isProdEnv = process.env.VITE_ENV === 'PROD';
  const isLargeDesktop = useMediaQuery(`(min-width:1440px )`);
  const handleChange = (selectedOption: OptionType | null | void) => {
    onSelect(selectedOption);
    const existingModel = localStorage.getItem('selectedModel');
    if (existingModel != selectedOption?.value) {
      localStorage.setItem('selectedModel', selectedOption?.value ?? '');
    }
  };
  const allOptions = useMemo(() => options, [options]);
  return (
    <>
      <div className={view === 'ContentView' ? 'w-[150px]' : ''}>
        <SpotlightTarget id='llmdropdown'>
          <Select
            type='select'
            aria-label='llm-dropdown'
            label={
              <div className='w-max! flex! gap-1 items-center'>
                <span>LLM Model for Processing & Chat</span>
              </div>
            }
            selectProps={{
              onChange: handleChange,
              // @ts-ignore
              options: allOptions?.map((option) => {
                const label = typeof option === 'string' ? capitalizeWithUnderscore(option) : capitalize(option.label);
                const value = typeof option === 'string' ? option : option.value;
                const isModelSupported = !isProdEnv || prodllms?.includes(value);
                return {
                  label: !isModelSupported ? (
                    <Tooltip type='simple' placement={isLargeDesktop ? 'left' : 'right'}>
                      <Tooltip.Trigger>
                        <span className='text-nowrap'>{label}</span>
                      </Tooltip.Trigger>
                      <Tooltip.Content>Available In Development Version</Tooltip.Content>
                    </Tooltip>
                  ) : (
                    <span className='text-nowrap'>{label}</span>
                  ),
                  value,
                  isDisabled: !isModelSupported,
                };
              }),
              placeholder: placeholder || 'Select an option',
              defaultValue: defaultValue
                ? { label: capitalizeWithUnderscore(defaultValue), value: defaultValue }
                : undefined,
              menuPlacement: 'auto',
              isDisabled: isDisabled,
              value: value,
            }}
            size='medium'
            isFluid
            htmlAttributes={{
              'aria-label': 'A selection dropdown',
            }}
          />
        </SpotlightTarget>
        {children}
      </div>
    </>
  );
};
export default memo(DropdownComponent);
